<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link href="https://fonts.font.im/css?family=Ranga" rel="stylesheet" />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font-family: 'Ranga', cursive;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(182, 233, 248);
            }
            .kuang {
                width: 300px;
                height: 400px;
                background-color: rgb(172, 166, 166);
                position: relative;
                background-image: url('bg.png');
                background-size: 100% 100%;
                border-radius: 10px;
                box-shadow: 4px 4px 6px rgb(6, 50, 70);
            }
            .result {
                font-family: 'Ranga', cursive;
                position: absolute;
                top: 20px;
                left: 20px;
                width: 260px;
                height: 60px;
                padding: 20px;
                font-size: 23px;
                text-align: right;
                letter-spacing: 1px;
                outline: none;
                background-color: rgb(166, 219, 190);
                opacity: 0.9;
            }
            .anniu {
                position: absolute;
                top: 100px;
                left: 20px;
                width: 260px;
                height: 240px;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                align-content: space-between;
                cursor: pointer;
            }
            .anniu span {
                width: 60px;
                height: 55px;
                color: rgb(34, 36, 58);
                line-height: 55px;
                text-align: center;
                font-size: 30px;
                font-weight: bold;
                background-color: rgb(248, 247, 247);
                border-radius: 5px;
                box-shadow: inset 2px 2px 3px rgb(65, 64, 64), inset -2px -2px 3px rgb(88, 86, 86);
            }
            .anniu span:hover {
                opacity: 0.8;
            }
            .anniu span:active {
                opacity: 1;
            }
            .zero {
                position: absolute;
                left: 20px;
                bottom: 20px;
                width: 260px;
                height: 30px;
                line-height: 30px;
                font-size: 18px;
                text-align: center;
                letter-spacing: 1px;
                border-radius: 15px;
                background-color: rgb(248, 247, 247);
                box-shadow: inset 1px 1px 1px rgb(65, 64, 64), inset -1px -1px 1px rgb(88, 86, 86);
                cursor: pointer;
                opacity: 0.4;
            }
            .zero:hover {
                opacity: 0.9;
            }
            .zero:active {
                opacity: 0.5;
            }
        </style>
    </head>
    <body>
        <!-- 定义标签, .result是显示计算结果框，.anniu里放数字和运算符按钮，.zero是清除按钮 -->
        <form class="kuang" name="kuang">
            <input type="text" class="result" name="result" />
            <div class="anniu">
                <span onclick="kuang.result.value+='7'">7</span>
                <span onclick="kuang.result.value+='8'">8</span>
                <span onclick="kuang.result.value+='9'">9</span>
                <span onclick="kuang.result.value+='+'">+</span>
                <span onclick="kuang.result.value+='4'">4</span>
                <span onclick="kuang.result.value+='5'">5</span>
                <span onclick="kuang.result.value+='6'">6</span>
                <span onclick="kuang.result.value+='-'">-</span>
                <span onclick="kuang.result.value+='1'">1</span>
                <span onclick="kuang.result.value+='2'">2</span>
                <span onclick="kuang.result.value+='3'">3</span>
                <span onclick="kuang.result.value+='*'">*</span>
                <span onclick="kuang.result.value+='0'">0</span>
                <span onclick="kuang.result.value+='.'">.</span>
                <span onclick="kuang.result.value+='/'">/</span>
                <span onclick="kuang.result.value=eval(kuang.result.value)">=</span>
            </div>
            <div class="zero" onclick="kuang.result.value=''">I'll clear it (一键清空)</div>
        </form>
    </body>
</html>
